<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    #app {
      width: 600px;
      margin: 0 auto;
    }
    .header {
      border: 1px solid;
      margin-bottom: 10px;
      padding: 20px;
    }
    .body {
      border: 1px solid;
    }
    table,
    th,
    td {
      border: 1px solid;
      border-collapse: collapse;
      width: 600px;
      text-align: center;
    }
    img {
      width: 50px;
    }
    .footer {
      border: 1px solid;
      border-collapse: collapse;
      width: 598px;
      text-align: center;
      font-weight: 900;
    }
  </style>
  <body>
    <div id="app">
      <div class="header">
        编号：
        <input type="text" v-model="ref" />
        品牌名称：
        <input type="text" v-model="name" />
        <br />
        产品图片地址：
        <input type="text" v-model="imgUrl" />
        价格：
        <input type="text" v-model="price" />
        <input type="button" value="添加" @click="add" />
        <!-- <button @click="add">添加</button> -->
      </div>
      <div class="body">
        <table>
          <tr>
            <th>
              全选：
              <input type="checkbox" @change="allChange" :checked="allCheck" />
            </th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,index) of goods" :key="item.id">
            <td><input type="checkbox" v-model="checks" :value="item" /></td>
            <td><img :src="item.imgUrl" alt="" /></td>
            <td>{{item.ref}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
              <button
                style="width: 15px"
                @click="delNumber(item)"
                :disabled="item.num==1"
              >
                -
              </button>
              {{item.num}}
              <button style="width: 15px" @click="addNumber(item)">+</button>
            </td>
            <td><button @click="del(index)" :key="checks.id">删除</button></td>
          </tr>
        </table>
        <div class="add" v-show="goods.length" style="text-align: right">
          <h2>总数量：{{totalNum}},总价：{{totalPrice}}</h2>
        </div>
        <div class="footer" v-show="!goods.length">没有更多数据了！！！</div>
      </div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: "#app",
      computed: {
        totalNum() {
          return this.checks.reduce(function (totalNum, item) {
            return (totalNum += parseInt(item.num));
          }, 0);
        },
        totalPrice() {
          return this.checks
            .reduce(function (totalPrice, item) {
              return (totalPrice += item.price * item.num);
            }, 0)
            .toFixed(2);
        },
      },
      watch: {
        checks(newVal) {
          console.log(newVal);
          if (newVal.length == this.goods.length) {
            //列表中的内容全部被勾选，那么全选也要被勾选
            this.allCheck = true;
          } else {
            this.allCheck = false;
          }
        },
      },
      data: {
        //控制全选按钮
        allCheck: false,
        //被勾选的内容
        checks: [],
        ref: "",
        name: "",
        imgUrl: "",
        price: "",
        goods: [
          {
            id: 1,
            ref: 111,
            imgUrl:
              "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F08%2F13%2F1357aeab2f33d84.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674724185&t=005a0b1e440de431c74d3533ada1a1a9",
            name: "苹果",
            price: "5",
            num: "1",
          },
          {
            id: 2,
            ref: 222,
            imgUrl:
              "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmedia2.fishtank.my%2Fmedia%2Fsyokchinese%2Fassets%2Farticle%2F1_74.jpg&refer=http%3A%2F%2Fmedia2.fishtank.my&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674724223&t=a31fdd33a72306501478c1a65618bf87",
            name: "香蕉",
            price: "25",
            num: "1",
          },
          {
            id: 3,
            ref: 333,
            imgUrl:
              "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.sjq315.com%2Fuploadfiles%2Fimage%2F20150512%2F20150512103221_8377.jpg&refer=http%3A%2F%2Fimg.sjq315.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674724250&t=15ba8b377021266a15c00879b433b5db",
            name: "橘子",
            price: "15",
            num: "1",
          },
        ],
      },
      methods: {
        //点击全选
        allChange(e) {
          console.log(e.target.checked);
          let checked = e.target.checked;
          if (checked) {
            //全选按钮被勾选
            this.checks = this.goods;
          } else {
            this.checks = [];
          }
        },
        delNumber(item) {
          // console.log(item)
          item.num--;
        },
        addNumber(item) {
          // console.log(item)
          item.num++;
        },
        del(index) {
          // console.log(index),
          this.goods.splice(index, 1);
        },
        add() {
          if (!this.ref || !this.imgUrl || !this.name || !this.price) {
            return;
          }
          let obj = {
            id: Math.random().toString(32).substring(2),
            imgUrl: this.imgUrl,
            ref: this.ref,
            name: this.name,
            num: 1,
            price: this.price,
          };
          this.goods.push(obj);
        },
      },
    });
  </script>
</html>
